<!DOCTYPE html >
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>图片轮播 jq(左右切换)</title>
		<link rel="stylesheet" type="text/css" href="swiper/dist/css/swiper.min.css" />
		<style>
			img{height:100%width:100%}
			.swiper-container{height: 300px;width:300px;}
		</style>
	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/1.jpg"></div>
				<div class="swiper-slide"><img src="img/2.jpg"></div>
				<div class="swiper-slide"><img src="img/3.jpg"></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>

		</div>
		<script src="js/jquery.min.js"></script>
		<script src="swiper/dist/js/swiper.jquery.js"></script>
		<script type="text/javascript">
			var mySwiper = new Swiper('.swiper-container', {
				direction: 'horizontal',
				loop: true,
				autoplay : 3000,
				speed:300,
				// 如果需要分页器
				pagination: '.swiper-pagination',
				paginationClickable :true,
	
				// 如果需要前进后退按钮
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
	
			})
		</script>
	</body>

</html>